<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>谈谈依赖和解耦 | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/30.ce9d1e44.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端架构</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html" aria-current="page" class="active sidebar-link">谈谈依赖和解耦</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html#接口管理" class="sidebar-link">接口管理</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html#状态管理" class="sidebar-link">状态管理</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html#功能管理" class="sidebar-link">功能管理</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html#依赖来自于约束" class="sidebar-link">依赖来自于约束</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html#依赖的划分" class="sidebar-link">依赖的划分</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/deep-learning/module-seperate.html#结束语" class="sidebar-link">结束语</a></li></ul></li><li><a href="/front-end-playground/front-end-basic/deep-learning/trace-stash.html" class="sidebar-link">大型前端项目要怎么跟踪和分析函数调用链</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/build-application.html" class="sidebar-link">前端构建大型应用</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/reactive-programing.html" class="sidebar-link">响应式编程在前端领域的应用</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/vscode-event.html" class="sidebar-link">VSCode 源码解读：事件系统设计</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/vscode-ipc.html" class="sidebar-link">VSCode 源码解读：IPC通信机制</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/online-doc-network.html" class="sidebar-link">在线文档的网络层设计思考</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/front-end-performance-analyze.html" class="sidebar-link">补齐Web前端性能分析的工具盲点</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/monitor-and-report.html" class="sidebar-link">前端监控体系搭建</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/why-spreadsheet-app-excited.html" class="sidebar-link">在线Excel项目到底有多刺激</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/task-runner-design.html" class="sidebar-link">如何设计一个任务管理器</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/network-design-responsibility-driven-design.html" class="sidebar-link">在线文档的网络层开发思考--职责驱动设计</a></li><li><a href="/front-end-playground/front-end-basic/deep-learning/network-design-dependency-decoupling.html" class="sidebar-link">在线文档的网络层开发思考--依赖关系梳理</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端深入理解</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端入门</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>大型项目总避免不了各种模块间相互依赖，如果模块之间耦合严重，随着功能的增加，项目到后期会越来越难以维护。今天我们一起来思考下，大家常说的代码解耦到底要怎么做？
</p> <h1 id="依赖是怎么产生的"><a href="#依赖是怎么产生的" class="header-anchor">#</a> 依赖是怎么产生的</h1> <p>既然要研究怎么让模块解耦，那当然要从根源来分析：依赖它到底从何而来？</p> <p>依赖其实是在我们想把代码写好的那一刻开始产生的。为什么这么说呢？因为大多数代码都是可以通过像流水线一样写下来，最终变成一个几千行的函数、几万行的单个文件。这个时候甚至没有拆分成模块，也就更谈不上所谓依赖和解耦了。</p> <p>忽然有一天，我们发现这种堆屎山的日子实在过的没有意思，开始研究怎么将一座大屎山拆成几个小屎山，然后再一点点清理干净。依赖的产生，就在我们一拆多的这个过程伴随出现的。</p> <h2 id="接口管理"><a href="#接口管理" class="header-anchor">#</a> 接口管理</h2> <p>当我们开始进行代码优化的时候，最先想到的就是将某些通用的功能抽象成单独的模块，通过提供接口这样的方式来给到需要的地方使用。</p> <p>为了避免过度设计，我们会基于现有和可预见的需要进行设计。但日常的开发中，不可预见的问题定位和调整却占了大部分的时间。</p> <p>例如，在做 To B 项目的时候，我们设计了一套完整的 API 给到对方，开始的时候大家都会按照这套接口来配合开发，其乐融融。突然有一天，老板拉了一个大客户，说这个客户的用户量会很大，必须要好好配合。老板一走，大客户马上化身甲方爸爸，说他们的接口已经写好了，友商都是按照他们的格式接入，都上线了。</p> <p>遇到这种情况，通常我们会新增一个适配层，专门用于我们的服务和甲方爸爸之间的适配。</p> <p>说了那么多，依赖在哪里呢？</p> <p>依赖其实在接口设计完成的时候就出来了，虽然这是我们自己设计的接口，但它依赖于上游按照约定来调用。而上游有调整的时候，我们是需要跟随者适配或者调整的。</p> <p>或者举个小一点的例子，我们在项目中使用了一个较出名的开源库。某一天该开源库升级版本了，新的版本不兼容旧的版本，同时声明旧的版本不会再继续维护了。这意味着如果我们不升级版本的话，后续旧的版本出现了 bug，我们只能自己啃源码来修复了。</p> <p>这是来自于“甲方按照约定接口来调用服务”、“乙方按照约定接口来提供服务”的依赖。</p> <h2 id="状态管理"><a href="#状态管理" class="header-anchor">#</a> 状态管理</h2> <p>由接口管理产生的依赖通常来自外部，而应用内部也会有依赖的产生，常见的包括状态管理和事件管理。我们先来看看状态管理。</p> <p>一个应用程序能按照预期正常运行，必然无法避免一些状态的管理。最简单的，生命周期就是一种状态。程序是否已经启动、功能是否正常运行、输入输出是否有变化，这些都会影响到程序的运行状态。</p> <p>由于程序会有状态变化，因此我们的功能实现必然依赖程序的状态。例如，只有用户登录了才能进行更多的操作、订单产生了才可以进行撤销、界面渲染完成了用户才可以点击，等等。</p> <p>从代码可读性和可维护性角度来看，面向对象编程近些年来还是稍胜于函数式编程，面向对象的设计本身就是状态设计的过程，而某个对象的运行结果，也会依赖于该对象的状态。</p> <p>这是来自于对某个程序“按照预期运行”进行合理设计而产生的依赖。</p> <h2 id="功能管理"><a href="#功能管理" class="header-anchor">#</a> 功能管理</h2> <p>当我们根据功能将代码拆分成一个个模块之后，功能模块的管理也同样会产生一些依赖。</p> <p>管理系统中最常见的就是面板的管理，对于每个面板来说，它应该只关心自身的状态。产品设计会要求我们在打开某个新的面板的时候，关闭其他面板；或是在点击面板以外的地方，关闭当前面板。这会涉及到面板与面板以外界面的通信，一般来说我们可以使用事件的方式来管理。每个面板在创建的时候，都需要监听外界的一个点击事件，并判断点击区域落在面板外面的时候，触发关闭。</p> <p>某一天，产品提了个需求，所有的这些面板关闭的时候都要有一个动画效果，至于这个关闭动画的持续时间，要根据点击位置与面板的距离来计算。我们需要在点击事件触发的时候，把点击的位置告诉监听对象。</p> <p>于是，我们全局搜了所有该类型事件的触发节点和监听节点，一一进行调整。</p> <p>这是来自于对某个功能“不会发生变更”而产生的依赖。</p> <h2 id="依赖来自于约束"><a href="#依赖来自于约束" class="header-anchor">#</a> 依赖来自于约束</h2> <p>为了方便管理，我们设计了一些约定，并基于“大家都会遵守约定”的前提来提供更好、更便捷的服务。</p> <p>举个例子，前端框架中为了更清晰地管理渲染层、数据层和逻辑处理，常用的设计包括 MVC、MVVM 等。而要使这样的架构设计发挥出效果，我们需要遵守其中的使用规范，不可以在数据层里直接修改界面等。</p> <p>可以看到，依赖来自于对代码的设计。</p> <h1 id="依赖可以解耦吗"><a href="#依赖可以解耦吗" class="header-anchor">#</a> 依赖可以解耦吗</h1> <p>既然依赖来自于设计，为什么我们又常常说要进行模块间的解耦，降低模块间的依赖呢？</p> <h2 id="依赖的划分"><a href="#依赖的划分" class="header-anchor">#</a> 依赖的划分</h2> <p>我们先来看看一个问题，所有的依赖都需要解耦吗？</p> <p>其实我们能看到，不合理的设计会导致代码间相互依赖，耦合严重。这种情况下，我们可以理解为产生了不合适的依赖。</p> <p>而通常我们所说的设计解耦，则是通过合理的设计，恰到好处的职责和边界划分。此时，同样会产生一些约定，但这样的约定可以更好地管理我们的代码，此时可以理解为产生了合理的依赖。</p> <p>因此，回到前面的疑问：既然依赖来自于设计，为什么我们要通过设计来降低依赖呢？显然，我们想要减少的，是不合理的依赖。而通过合理的设计，可以进行恰当的解耦。</p> <h3 id="无状态的函数式编程"><a href="#无状态的函数式编程" class="header-anchor">#</a> 无状态的函数式编程？</h3> <p>每个程序员对函数式编程都曾抱有过幻想，写多了面向对象编程的代码，对一些状态的管理和维护感到心烦。而无状态的函数式仿佛是白月光，可远观不可亵玩。</p> <p>但即使是基于函数式编程设计的语言，写出来的功能也无法逃脱状态管理的命运。像 Clojure 编写的 Storm，也需要进行消息队列的管理、重启后服务的恢复等一系列状态管理。</p> <p>在前端领域，React 同样基于函数式编程，但框架同样带有生命周期这样的状态。用 React 来实现的应用也依赖状态，因此同样产生了 Redux/Mobx 这样的工具来进行数据状态的管理工具。</p> <p>应用程序无法离开状态的管理，是否意味着我们不需要函数式编程呢？并不是这样的。相反，我们需要对功能模块进行划分，划分出有状态和无状态的功能，来将状态管理放置到更小的范围，避免“牵一发而动全身”。</p> <p>在这里，我们进行了状态有无的划分。</p> <h3 id="单向流的数据管理"><a href="#单向流的数据管理" class="header-anchor">#</a> 单向流的数据管理？</h3> <p>代码解耦的方式，其中也包括了使用单向数据流这种方式。</p> <p>不管是 React 还是 Vue，都提供了单向数据流的管理工具。由于一个应用中，各个功能间都会有一些相互间的数据依赖，为了避免模块间的直接依赖，使用单向流的方式，可以将一些非模块内闭环的数据通过有序、单向的方式进行捆绑。通过这样的方式，模块之间的依赖解除了，调整为模块与数据流模块之间的依赖，代码的耦合程度得到缓解。</p> <p>在这里，我们进行了模块内外数据的划分。</p> <h3 id="服务化"><a href="#服务化" class="header-anchor">#</a> 服务化</h3> <p>服务化，是系统解耦最常用的一种方式。</p> <p>通过将功能进行业务领域的拆分，我们得到了不同领域的服务，常见的例如电商系统拆分成订单系统、购物车系统、商品系统、商家系统、支付系统等等。</p> <p>而如今打得火热的“微服务”，也都是基于领域建模的一种实现方式。</p> <p>在这里，我们进行了业务领域的划分。</p> <h3 id="模块化与依赖注入"><a href="#模块化与依赖注入" class="header-anchor">#</a> 模块化与依赖注入？</h3> <p>相比于针对系统设计的服务化，同样有针对功能设计的模块化。</p> <p>在前端领域，同样可以根据功能拆分为表单功能、列表功能、面板功能等，通过给这些功能设置边界、封装成独立完整的模块，可以将功能与功能之间的依赖降到最低。同样的，根据功能划分的方式，我们还可以将功能拆分成渲染层、数据层、网络层这样的模块。</p> <p>而配合依赖注入的方式，我们在使用这些功能的时候不再需要单独对这些功能的状态进行维护，同样实现了功能模块间的解耦。</p> <p>在这里，我们进行了功能应用的划分。</p> <h2 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h2> <p>到这里，你会不会有点疑惑，说了半天好像什么都没说？我当然知道要合理设计啊，但什么才是合理的设计呢？</p> <p>架构设计没有银弹，系统的复杂度、使用场景、用户群体、机器性能等都会影响决策，“具体场景具体分析”才是最优解。</p> <p>而我们能做的，就是多思考、多参考、多分析、多尝试，沉淀下来的经验和思考方式才是最实用的工具。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-basic/deep-learning/module-seperate.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/front-end-playground/front-end-basic/deep-learning/trace-stash.html">
          大型前端项目要怎么跟踪和分析函数调用链
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-3749" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/30.ce9d1e44.js" defer></script>
  </body>
</html>
